<template>
    <section>
        <van-swipe class="my-swipe banner-box" :autoplay="3000" :show-indicators="false" indicator-color="white">
            <van-swipe-item v-for="(item, index) in images" :key="index">
                <img :src="item" />
            </van-swipe-item>
        </van-swipe>

        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            class="list-box"
            offset="1"
            @load="onLoad"
        >
            <van-cell v-for="(item, index) in list" :key="index" :to="'/detail/' + item.id" :title="(index + 1) + '. ' + item.title" class="bg-black font-write" :border="true"/>
        </van-list>
    </section>
</template>

<script>
    import { circularList, banner } from '../../api.js'

    export default {
        name: 'index',
        data() {
            return {
                loading: false,
                finished: false,
                error: false,
                page: 1,
                limit: 10,
                total: 0,
                list: [],
                images: []
            }
        },
        created() {
            this.init()
        },
        methods: {
            init() {
                banner().then(response => {
                    this.images = response.data
                })
            },
            onLoad() {
                circularList({
                    page: this.page,
                    limit: this.limit
                }).then(response => {
                    this.loading = false;
                    if (response.data.list.length > 0) {
                        for (let i = 0; i < response.data.list.length; i++) {
                            this.list.push(response.data.list[i])
                        }
                        this.page += 1
                    } else {
                        this.finished = true;
                    }
                }).catch(error => {
                    this.loading = false
                    this.error = true
                })
            },
            onRefresh() {
                this.finished = false;
                this.loading = true;
                this.onLoad();
            },
        }
    }
</script>

<style scoped>
    .banner-box {
        margin: 10px 10px 0 10px;
        border-radius: 10px;
    }
    .banner-box,.list-box {
        background: #313131;
    }
    .list-box .van-cell:after{
        border-bottom: 1px solid #575656;
        transform: none;
        -webkit-transform: none;
    }
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        height: 150px;
        text-align: center;
        background-color: #313131;
    }
    .list-box {
        padding-top: 10px;
        margin: 10px 10px;
        min-height: 40vh;
        border-radius: 10px;
    }
</style>
